<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;">
        <el-row type="flex" justify="center" style="align-content: center;height: 100%;margin-top: 2%">
            <el-form ref="ruleFormRef" style="width: 80%;" :model="ruleForm" :rules="rules" label-width="auto"
                :size="formSize" status-icon :label-position="labelPosition">
                <el-col :span="20">
                    <el-form-item label="店铺名称">
                        <el-input v-model="ruleForm.name" style="width: 100%" :rows="10" type="text" />
                    </el-form-item>
                    <el-col :span="12">
                        <el-form-item label="地址">
                            <el-cascader size="large" :options="regionData" v-model="selectedOptions" :props="props"
                                @change="handleChange" style="width: 100%;">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-form-item label="店铺介绍">
                        <el-input v-model="ruleForm.description" style="width: 100%" :rows="5" type="textarea" />
                    </el-form-item>
                    <el-form-item label="快递品牌">
                        <el-input v-model="ruleForm.express" style="width: 100%" :rows="10" type="text" />
                    </el-form-item>
                    <el-form-item>
                        <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                            <el-col :span="14">
                                <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                                    @click="submitForm">提交店铺申请</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ComponentSize, FormInstance, FormRules } from 'element-plus'
import type { FormProps } from 'element-plus'
import { regionData, codeToText } from 'element-china-area-data';
import { userInfoStore } from '../assets/userStore/userStore'
import { applyStore, queryAllKind } from '../assets/net/NetUtils';
import router from '../router'
import { KindModel } from '../assets/model/Kind';
import { StoreModel } from '../assets/model/Store';


const userStore = userInfoStore();
let province = ref<string>()
let city = ref<string>()
let county = ref<string>()
let kinds = ref<Array<KindModel>>()


onMounted(() => {
    queryAllKind()
        .then((value) => {
            kinds.value = value.data;
        })
})

const handleChange = () => {
    province.value = codeToText[selectedOptions.value[0]];
    let cityCode = selectedOptions.value[1];
    if (cityCode === 5002) {
        county.value = codeToText[selectedOptions.value[2]];
    } else if (cityCode === (5001 || 1201 || 1101 || 1001)) {
        city.value = codeToText[selectedOptions.value[1]];
    } else {
        city.value = codeToText[selectedOptions.value[1]];
        county.value = codeToText[selectedOptions.value[2]];
    }
    ruleForm.address = province.value + city.value + county.value;
}
const props = {
    expandTrigger: 'hover' as const,
}
let selectedOptions = ref()

const labelPosition = ref<FormProps['labelPosition']>('top')
const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<StoreModel>({
    name: '',
    description: '',
    uid: userStore.uid,
    express: '',
    address: ''
})

const rules = reactive<FormRules<StoreModel>>({
    name: [
        {
            required: true,
            message: '请输入商铺名称',
            trigger: 'change'
        }
    ],
    description: [
        {
            required: true,
            message: '请输入商铺描述',
            trigger: 'change',
        },
    ],
    express: [
        {
            required: true,
            message: '请输入商铺的快递品牌',
            trigger: 'change',
        },
    ],
    address: [
        {
            required: true,
            message: '请选择商铺所在地',
            trigger: 'change',
        },
    ]
})

const submitForm = () => {
    applyStore(ruleForm)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data)
                router.go(0);
            } else {
                ElMessage.error(value.data)
            }
        })
}
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>